import React from "react";
import ReactDom from 'react-dom';

import './Props.css'

class Father extends React.Component {
    state= {
        msg:"father msg"
    }

    render() {
        return (
            <div className='fatherBox'>
                <h1>父组件</h1>
                <Child data={this.state.msg} num={10}></Child>
            </div>
        )
    }
}

//父向子传值 类组件 constructor 可写可不写

/* class Child extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div className='childBox'>
                <h1>子组件</h1>
                <div>接受父组件传过来的值：<span>{this.props.data}</span></div>
            </div>
        )
    }
} */

/* class Child extends React.Component {

    render() {
        return (
            <div className='childBox'>
                <h1>子组件</h1>
                <div>接受父组件传过来的值：<span>{this.props.data}</span></div>
            </div>
        )
    }
} */

//函数式组件 props

let Child = (props)=>{
        return (
            <div className='childBox'>
                <h1>子组件</h1>
                <div>接受父组件传过来的值：<span>{props.data}</span></div>
            </div>
        )
}

export default Father
